<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head th:replace="_fragments :: head(~{::title})">
		<meta charset="utf-8" />
		<meta name="viewport"content="width=device-width,initial-scale=1.0" />
		<title>博客详情</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
		<link rel="stylesheet" href="../static/css/typo.css"/>
		<link rel="stylesheet" href="../static/css/animate.css" />
		<link rel="stylesheet" href="../static/lib/prism/prism.css" />
		<link rel="stylesheet"  href="../static/lib/tocbot/tocbot.css"/>
		<link rel="stylesheet"  href="../static/css/me.css"/>
		
	</head>

    <body>
<!--    头部页面-->
	    <nav th:replace="_fragments::menu(n)"></nav>


		<div id="waypoint" class=" m-padded-tb-big m-container-smal animate__animated animate__bounce">
			<div class="ui container">
				<div class="ui top attached  segment">
					<!--博客人-->
					<div class="ui  horizontal  link list">
						<div class="item">
							<img src="https://picsum.photos/id/103/50/50" alt="" class="ui avatar image" />
							<div class="content"><a href="#" class="header" th:text="${user.nickname}"></a></div>
						</div>
						<div class="item">
							<i class="calender icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}"></span>
						</div>
						<div class="item">
							<i class="eye icon" ></i><span th:text="${blog.views}"></span>
						</div>
					</div>
				</div>

				<!--首图-->
				<div class="ui attached segment">
					<img th:src="@{${blog.firstPicture}}" alt="" class="ui rounded fluid image" />
				</div>

				<!--博客-->
				<div class="ui attached padded segment">
					<!--标签-->
					<div class="ui right aligned basic segment">
						<div class="ui  orange basic label">
							<span th:text="${blog.flag}"></span>
						</div>
					</div>
					<!--标题-->
					<h2 class="ui centered aligned header">
						<span th:text="${blog.title}"></span>
					</h2>
					<!--内容-->
					<div id="content" class="typo  typo-selection js-toc-content  m-padded-lr-responsive m-padded-tb-large">
						<span th:utext="${blog.content}"></span>
					</div>

					<!--标签-->
					<div class="m-padded-lr-responsive">
						<div class="ui basic teal left pointing label">
							方法论
						</div>
					</div>
					<!--赞善-->
					<div class="ui center aligned basic segment">
						<button id="payButton" class="ui orange  basic circular button">赞赏</button>
					</div>
					<div class="ui payQR flowing popup  transition hidden">
						<div class="ui orange basic label">
							<div class="ui images" style="font-size: inherit !important;">
								<div class="image">
									<img th:src="@{/images/cat.jpg}" alt="" class="ui rounded bordered image" style="width: 120px;"/>
								<div>支付宝</div>
								</div>
								<div class="image">
									<img th:src="@{/images/cat.jpg}" alt="" class="ui rounded bordered image" style="width: 120px;"/>
								<div>微信</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="ui attached positive message">
					<!--博客信息-->
					<div class="ui middle aligned grid">
						<div class="eleven wide column">
							<ui class="list">
								<li>作者：<span th:text="${user.nickname}"></span></li>
								<li>发表时间：<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}"></span></li>
								<li>版权声明：xxxxxxxx(数据库无内容，待修改)</li>
								<li>转载声明：xxxxxxxxx(数据库无内容)</li>
							</ui>
						</div>
						<div class="five wide column">
							<img th:src="@{/images/cat.jpg}" alt="" class="ui right floated rounded bordered image" style="width: 10em;" />
						</div>
					</div>
				</div>

				<!--=======================================================-->
				<div  class="ui bottom attached segment">

					<div th:fragment="commentList">
						<div id="comment-container" class="ui teal segment">
							<div class="ui comments" style="max-width: 100%">
								<h3 class="ui dividing header">评论</h3>

								<div th:each="item:${comments}">
									<div class="comment" >
										<a class="avatar">
											<img th:src="@{${item.avatar}}">
										</a>
										<div class="content">
											<a class="author" th:text="${item.nickname}">Matt</a>
											<div class="metadata">
												<span class="date" th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH-mm')}">今天下午 5:42</span>
											</div>
											<div class="text" th:text="${item.content}">太赞了！ </div>
											<div class="actions">
												<a class="reply" data-commentid="1" data-commentnickname="Matt"
												   th:attr="data-commentid=${item.id},data-commentnickname=${item.nickname}" onclick="reply(this)">回复</a>
											</div>
										</div>

										<div class="comments" th:if="${#arrays.length(item.replyComments)}>0">
											<div class="comment" th:each="reply:${item.replyComments}">
												<a class="avatar">
													<img th:src="@{${reply.avatar}}">
												</a>
												<div class="content">
													<a class="author">
														<span th:text="${reply.nickname}">json</span><span th:text="|@ ${reply.parentComment.nickname}|"></span>
													</a>
													<div class="metadata">
														<span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH-mm')}">刚刚</span>
													</div>
													<div class="text" th:text="${reply.content}">艾略特你永远是多么正确 :) </div>
													<div class="actions">
														<a class="reply" data-commentid="1" data-commentnickname="Matt"
														   th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
													</div>
												</div>
											</div>
										</div>


									</div>
								</div>
							</div>
						</div>
					</div>
				</div>


					<!-- 留言评论表单-->
					<div id="comment-form"	 class="ui form">

						<input type="hidden" name="blog.id" th:value="${blog.id}"><!--获取博客id，用于添加-->
						<input type="hidden" name="parentComment.id" value="-1"><!--获取父评论id，点击回复后由reply()设置-->

						<div class="field">
							<textarea name="content" placeholder="请输入评论信息"></textarea>
						</div>
						<div class="fields">
							<div class="field m-mobile-wide m-margin-bottom-small">
								<div class="ui left icon  input">
									<i class="user icon"></i>
									<input type="text" name="nickname" placeholder="姓名" />
								</div>
							</div>
							<div class="field m-mobile-wide m-margin-bottom-small">
								<div class="ui left icon input">
									<i class="mail icon"></i>
									<input type="text" name="email" placeholder="邮箱" />
								</div>
							</div>
							<div class="field m-mobile-wide m-margin-bottom-small">
								<button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
							</div>
						</div>
					</div>


				</div>
			</div>
		</div>






		<div id="toolbar" class="m-right-bottom m-fixed m-padded " style="display: none !important;">
			<div class="ui vertical icon buttons ">
			<button type="button" class="ui toc teal button">目录</button>
			<a href="#comment-container" class="ui teal button">留言</a>
			<button  class="ui wechat icon button"><i class="weixin icon"></i></button>
			<div id="toTop-button" href="#" class="ui teal button"><i class="chevron up icon"></i></div>
		</div>
		</div>
			<div class="ui toc-container flowing popup  transition hidden" style="width: 250px !important;">
							<ol class="js-toc">
								
							</ol>
			</div>
			<div id="qrcode" class="ui wechatQR flowing popup  transition hidden " style="width: 130px !important;">
				<!--<img src="static/images/cat.jpg" alt="" class="ui rounded image"style="width: 120px;" />-->
			</div>

		<br />
		<br />
		

        <footer th:replace="_fragments::footer"></footer>



		<script th:src="@{'https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js'}"></script>
		<script th:src="@{'https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js'}"></script>
		<script th:src="@{'//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js'}"></script>
		<script th:src="@{/lib/prism/prism.js}"></script>
		<script th:src="@{/lib/tocbot/tocbot.min.js}"></script>
		<script th:src="@{/lib/qrcode/qrcode.min.js}"></script>
		<script th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
		<script>

			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			});
			$('#payButton').popup({
				popup : $('.payQR,popup'),
				on : 'click',
				position: 'bottom center'
			});
			tocbot.init({
  // Where to render the table of contents.
  tocSelector: '.js-toc',
  // Where to grab the headings to build the table of contents.
  contentSelector: '.js-toc-content',
  // Which headings to grab inside of the contentSelector element.
  headingSelector: 'h1, h2, h3',
  // For headings inside relative or absolute positioned containers within content.
  hasInnerContainers: true,
});
			$('.toc.button').popup({
				popup : $('.toc-container,popup'),
				on : 'click',
				position: 'left center'
			});
			$('.wechat').popup({
				popup : $('.wechatQR,popup'),
				on : 'hover',
				position: 'left center'
			});
			var qrcode = new QRCode("qrcode", {
			    text: "http://jindo.dev.naver.com/collie",
			    width: 100,
			    height: 100,
			    colorDark : "#000000",
			    colorLight : "#ffffff",
			    correctLevel : QRCode.CorrectLevel.H
			});
			$('#toTop-button').click(function () {
				$(window).scrollTo(0,500);
			});
			var waypoint = new Waypoint({
				  element: document.getElementById('waypoint'),
				  handler: function(direction) {
				  	if(direction =='down'){
				  		$('#toolbar').show(500);
				  	}
				  	else{
				  		$('#toolbar').hide(500);
				  	}
				    console.log('Scrolled to waypoint!')
				  }
				});

			//评论表单验证
			$('.ui.form').form({
				field:{
					title: {
						identifier: 'content',
						rules: [{
							type: 'empty',
							prompt: '请输入评论'
						}]
					},
					content: {
						identifier: "nickname",
						rules: [{
							type: 'empty',
							prompt: '请输入你的大名'
						}]
					},
					type: {
						identifier: 'email',
						rules: [{
							type: 'email',
							prompt: '请填入正确邮箱地址'
						}]
					}
				}
			});

			$('#commentpost-btn').click(function () {
  				//校验表单判断。。。。

  				if(false){
					console.log('校验失败');
				}else {
  					console.log('校验成功');
					postData();
				}
			})

			function clearContent() {
				$("[name='content']").val('');
				$("[name='parentComment.id']").val(-1)
				$("[name='content']").attr("placeholder" ,"请输入评论信息...");
			}

			function reply(obj) {
				var commentId = $(obj).data('commentid');
				var commentNickname = $(obj).data("commentnickname");
				$("[name='content']").attr("placeholder" ,"@"+commentNickname).focus();
				$("[name='parentComment.id']").val(commentId);
				$(window).scrollTo($("#comment-form"),500);
			}


			function postData() {
				var comment = {
					nickname : $("[name='nickname']").val(),
					email: $("[name='email']").val(),
					content : $("[name='content']").val(),
					'blog.id' : $("[name='blog.id']").val(),
					'parentComment.id' : $("[name='parentComment.id']").val()
				};

				$.post(
						{
							url : "/comments",
							data : comment,
							success: function (data) {
								$("#comment-container").html(data);
								$(window).scrollTo($("#comment-container"),500);
								clearContent();
							}
						},
				)
			}


		</script>
	</body>
</html>
